<template>
  <svg :width="`${width}`" :height="`${width}`" :viewBox="`0 0 ${width} ${width}`">
    <g :transform="`translate(${width/2}, ${width/2})`">
      <path v-for="(item, index) in path" :fill="color[index]" :d="item"></path>
      <text transform="" text-anchor="middle"></text>
    </g>
  </svg>
</template>
<script>
  import * as d3 from 'd3';

  export default {
    name: 'DonutChart',
    props: {
      width: {
        type: Number,
        default: 300,
      },
      outerR: {
        type: Number,
        default: 130,
      },
      innerR: {
        type: Number,
        default: 90,
      },
      dataset: {
        type: Array,
        default() {
          return [5, 10, 20, 45, 6, 25];
        },
      },
      color: {
        type: Array,
        default() {
          return ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
        },
      },
    },
    computed: {
      path() {
        const dataset = this.dataset;
        const pies = d3.pie()(dataset);
        const arcs = [];
        pies.forEach((d) => {
          const arc = d3.arc().innerRadius(this.innerR)
            .outerRadius(this.outerR)
            .startAngle(d.startAngle)
            .endAngle(d.endAngle)();
          arcs.push(arc);
        });
        return arcs;
      },
    },
  };
</script>
<style scoped>
</style>
